<template>
	<!-- 账户页面中双击账户后，弹框（账户明细，账户-账单明细） -->
	<view class="bank-detail-container">
		<top-title-text @closeBtn="closeBtn" @rightBtnCallback="editAccount" :titleText="account.name" :isShowRightBtn="true"></top-title-text>
		<!-- scroll-view 解决弹框中内容过多时无法上下滑动问题 -->
		<scroll-view scroll-y="true" style="height: 1200rpx;width: 100%;margin-top: 10rpx;">
			<!-- 明细父盒子 -->
			<view class="bank-detail-card-container"  :style="{backgroundColor: accountDetailCardBgcColorArr[0]}">
				<!-- 里面分上下结构 上面左边图标，右边账户尾号 -->
				<view class="bank-detail-up-container">
					<view :class="['bank-detail-up-left-icon', 'iconfont', account.icon]" :style="{color: account.iconColor}"></view>
					<view class="bank-detail-up-right-num-container">
						<view class="bank-detail-up-right-num">****</view>
						<view class="bank-detail-up-right-num-content">{{account.lastFourDigitsOfCard}}</view>
					</view>
				</view>
				<!-- 下面左边名字，金额，右边两个图标-->
				<view class="bank-detail-down-container">
					<!-- 左边名字和金额 -->
					<view class="bank-detail-down-left-name-money-container">
						<view class="bank-detail-down-left-name-content">{{account.name}}</view>
						<view class="bank-detail-down-left-money-content">{{account.money}}</view>
					</view>
					<!-- 右边两个图标按钮 -->
					<view class="bank-detail-down-right-icon-container">
						<!-- + 图标 -->
						<view class="bank-detail-down-right-icon-left-container">
							<view class="bank-detail-down-right-icon-left-icon iconfont icon-jiajianzujianjiahao"></view>
						</view>
						<!-- 转换图标 -->
						<view class="bank-detail-down-right-icon-right-container">
							<view class="bank-detail-down-right-icon-right-icon iconfont icon-duihuan"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 账单明细标题 -->
			<view class="bank-detail-bill-title-container">
				<view class="bank-detail-bill-title-content">账单</view>
			</view>
			<!-- 账单明细内容 -->
			<bill-list :flag="account != null && account.billVoList != null" @selectBill="selectBill" :billDataVoList="account.billVoList"></bill-list>
			<no-data :flag="!(account != null && account.billVoList != null)"></no-data>
		</scroll-view>
	</view>
</template>
<script>
	import {switchTab} from '@/util/util.js';
	import {checkStrType} from '@/util/regular/regular.js';
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	import bankIcon from '@/components/bank-icon/bank-icon.vue';
	import systemBtn from '@/components/system-btn/system-btn.vue';
	import noData from '@/components/no-data/no-data.vue';
	import billList from '@/components/bill-list/bill-list.vue';
	export default {
		components: {
			topTitleText, bankIcon, systemBtn, noData, billList
		},
		props: {
			account: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			/** 双击账单回调
			 * @param {Object} item 账单对象
			 * @param {Object} index 索引
			 */
			selectBill(item, index) {
				console.log(item, index, "回调");
				// 再回调账户主页面，调用后弹框显示账单详情
				this.$emit("showBillDetail", item, index);
			},
			/**
			 * 点击左上角关闭事件
			 */
			closeBtn() {
				this.$emit("closeBtn")
			},
			/**
			 * 点击编辑，不关闭当前弹框，直接弹框明细
			 */
			editAccount() {
				debugger
				this.$emit('editAccount');
			}
		},
		mounted(){
			console.log("account数据", this.account);
		},
	};
</script>
<style lang="scss">
	.bank-detail-container {
		width: 100%;
		min-height: 100rpx;
		font-size: 30rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: $themeLightYellowColor;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		
		.bank-detail-card-container {
			width: 100%;
			height: 300rpx;
			padding: 45rpx 30rpx;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			//border: 1rpx solid #dfdede;
			//box-shadow: 0rpx 2rpx 1rpx #dfdede;
			border-color: rgba(0,0,0,.09);
			box-shadow: 0 2rpx 8rpx #dfdede;
			
			.bank-detail-up-container {
				width: 100%;
				height: 40%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				
				.bank-detail-up-left-icon {
					font-size: 65rpx;
				}
				
				.bank-detail-up-right-num-container {
					width: 40%;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.bank-detail-up-right-num {
						color: $typefaceGreyColor;
						margin-right: 10rpx;
					}
					.bank-detail-up-right-num-content {
						font-size: 45rpx;
						color: $typefaceGreyColor;
					}
				}
			}
			
			.bank-detail-down-container {
				width: 100%;
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.bank-detail-down-left-name-money-container {
					width: 50%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: flex-start;
					
					.bank-detail-down-left-name-content {
						font-weight: 200;
						color: $typefaceGreyColor;
						margin-bottom: 10rpx;
					}
					.bank-detail-down-left-money-content {
						font-size: 45rpx;
						font-weight: bold;
					}
				}
				
				.bank-detail-down-right-icon-container {
					width: 40%;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					color: white;
					
					.bank-detail-down-right-icon-left-container {
						width: 28%;
						height: 50%;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: $themeBgcbrownColor;
						margin-right: 20rpx;
						.bank-detail-down-right-icon-left-icon {
							
						}
					}
					
					.bank-detail-down-right-icon-right-container {
						width: 28%;
						height: 50%;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: $themeYellowColor;
						.bank-detail-down-right-icon-right-icon {
							transform: rotate(-90deg);
						}
					}
				}
			}
		}
		
		.bank-detail-bill-title-container {
			width: 100%;
			height: 60rpx;
			font-size: 25rpx;
			line-height: 60rpx;
		}
		
		// .bank-detail-bill-content-container {
		// 	width: 100%;
		// 	height: 160rpx;
		// 	display: flex;
		// 	flex-direction: column;
			
			
		// 	.bank-detail-bill-content-up-container {
		// 		width: 100%;
		// 		height: 30%;
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
				
		// 		.bank-detail-bill-content-up-left-container {
		// 			width: 26%;
		// 			height: 100%;
		// 			font-weight: bold;
		// 			display: flex;
		// 			justify-content: space-between;
		// 			align-items: center;
					
					
		// 			.bank-detail-bill-content-up-left-date {
						
		// 			}
					
		// 			.bank-detail-bill-content-up-left-week {
						
		// 			}
		// 		}
				
		// 		.bank-detail-bill-content-up-right-container {
		// 			width: 15%;
		// 			height: 100%;
		// 			font-size: 27rpx;
		// 			display: flex;
		// 			justify-content: space-between;
		// 			align-items: center;
					
		// 			.bank-detail-bill-content-up-right-type {
		// 				color: $typefaceRedColor;
		// 				font-weight: 400;
		// 			}
					
		// 			.bank-detail-bill-content-up-right-money {
						
		// 			}
		// 		}
				
		// 	}
			
			
			
		// 	.bank-detail-bill-content-down-container {
		// 		margin-top: 10rpx;
		// 		width: 100%;
		// 		height: 60%;
		// 		box-sizing: border-box;
		// 		padding: 0rpx 20rpx;
		// 		display: flex;
		// 		justify-content: space-between;
		// 		align-items: center;
		// 		background-color: white;
		// 		box-shadow: 0rpx 2rpx 1rpx #dfdede;
		// 		border: 0.5rpx solid #dfdede;
		// 		border-radius: 10rpx;
				
		// 		.bank-detail-bill-content-down-left-container {
		// 			width: 30%;
		// 			height: 100%;
		// 			display: flex;
		// 			justify-content: space-around;
		// 			align-items: center;
				
		// 			.bank-detail-bill-content-down-left-icon-container {
		// 				width: 32%;
		// 				height: 65%;
		// 				border-radius: 50%;
		// 				background-color: red;
						
						
		// 				.bank-detail-bill-content-down-left-icon-content {
							
		// 				}
		// 			}
					
		// 			.bank-detail-bill-content-down-left-name {
						
		// 			}
		// 		}
				
		// 		.bank-detail-bill-content-down-right-container {
		// 			width: 20%;
		// 			height: 100%;
		// 			display: flex;
		// 			flex-direction: column;
		// 			justify-content: center;
		// 			align-items: flex-end;
					
					
		// 			.bank-detail-bill-content-down-right-up-container {
		// 				width: 100%;
		// 				height: 40%;
		// 				display: flex;
		// 				justify-content: flex-end;
		// 				align-items: center;
						
		// 				.bank-detail-bill-content-down-right-up-money {
		// 					font-size: 30rpx;
		// 					color: red;
		// 					margin-right: 10rpx;
		// 				}
						
		// 				.bank-detail-bill-content-down-right-up-icon {
							
		// 				}
		// 			}
					
		// 			.bank-detail-bill-content-down-right-down-name {
		// 				width: 100%;
		// 				height: 30%;
		// 				display: flex;
		// 				justify-content: flex-end;
		// 				align-items: flex-start;
		// 				font-size: 24rpx;
		// 				color: $typefaceGreyColor;
		// 			}
		// 		}
		// 	}
		// }
		
		// 没有数据时图标显示
		// .bank-detail-bill-no-data-container {
		// 	width: 100%;
		// 	height: 400rpx;
		// 	display: flex;
		// 	flex-direction: column;
		// 	justify-content: center;
		// 	align-items: center;
			
		// 	.bank-detail-bill-no-data-icon {
		// 		font-size: 170rpx;
		// 		color: $themeIconLightGreyColor;
		// 	}
			
		// 	.bank-detail-bill-no-data-content {
		// 		font-size: 30rpx;
		// 		color: $typefaceGreyColor;
		// 	}
		// }
	}
</style>
